<template>
  <div class="app-box">
    <a-card class="card" title="配置记录">
      <a-list item-layout="horizontal" :data-source="dataList">
        <template #renderItem="{ item }">
          <a-list-item>

            <a-card style="width: 100%" :title="item.id">
              <template #extra><span @click="del(item.id)">删除</span></template>
              <div>
                <a-tag color="green"> 本地地址:</a-tag><a-tag color="purple">{{item.localPath}}</a-tag>
              </div>
              <div>
                <a-tag color="green"> 远程地址:</a-tag><a-tag color="purple">{{item.remotePath}}</a-tag>
              </div>
              <div><a-tag color="green">  同步类型:</a-tag><a-tag color="purple">{{item.syncType}}</a-tag></div>
              <div><a-tag color="green">  同步模式:</a-tag><a-tag color="purple">{{item.syncMode}}</a-tag></div>
              <div><a-tag color="green">  同步时间:</a-tag><a-tag color="purple">{{item.syncTime?item.syncTime:'实时同步'}}</a-tag></div>
              <div>
                <a-tag color="green"> webdav地址:</a-tag><a-tag color="purple">{{item.webDavAddress}}</a-tag>
              </div>
              <div>
                <a-tag color="green"> webdav用户名:</a-tag><a-tag color="purple">{{item.webDavUsername}}</a-tag>
              </div>
              <div>
                <a-tag color="green">  webdav密码:</a-tag><a-tag color="purple">{{item.webDavPassword}}</a-tag>
              </div>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
    </a-card>
    <a-card class="card" title="添加配置">
      <webdav_add></webdav_add>
    </a-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { syncWebDavConfigDel, syncWebDavConfigList} from "../../api/client/syncwebdav.js";
import Webdav_add from "./config_add/webdav_add.vue";


const dataList = ref()

const refList = () => {
  syncWebDavConfigList().then(res => {
    dataList.value = res.data
  })
}
const del = (id) => {
  syncWebDavConfigDel({id}).then(res => {
    if (res.data){
      refList()
    }
  })
}

onMounted(() => {
  refList()
})
</script>

<style lang="less">

.app-box {
  display: flex;
  justify-content: space-between;

  > .card {
    width: 100%;
    margin: 10px;
    padding: 10px;
  }

  > .card:nth-child(1) {
    flex: 2;
  }

  > .card:nth-child(2) {
    flex: 1;
  }
}

</style>
